<template>
  <div class="box" :class="{ mask: showMask }" @click="clickMaskFn">
    <!-- 流星 -->
    <div
      class="star"
      v-for="item in starCount"
      :key="item.id"
      :style="{
        top: item.top + 'px',
        left: item.left + 'rpx',
        animationDelay: item.delay + 's'
      }"
    ></div>
    <!-- 登录框 -->
    <div class="form_box" :class="{ show_from: showMask }">
      <form class="form_wrap" @submit="formSubmit" @click.stop>
        <h2 class="title">登录</h2>
        <view class="form-item">
          <view class="label" :class="{ top_label: isTopNameLabel }">用户名</view>
          <input
            name="userName"
            :adjust-position="false"
            type="text"
            @focus="focusFn('name')"
            @blur="blurFn($event, 'name')"
          />
          <span class="input_border" :class="{ focus_border: isTopNameLabel }"></span>
        </view>
        <view class="form-item">
          <view class="label" :class="{ top_label: isTopPsLabel }">密码</view>
          <input
            name="password"
            :adjust-position="false"
            type="text"
            password
            @focus="focusFn('password')"
            @blur="blurFn($event, 'password')"
          />
          <span class="input_border" :class="{ focus_border: isTopPsLabel }"></span>
        </view>
        <view class="error_tip"> {{ errTip }} </view>
        <view class="form-btn">
          <button form-type="submit">账户登录</button>
        </view>
      </form>
    </div>
  </div>
</template>
<script>
import { getRandomFn } from '@/common/utils/util.js';
import { login } from '@/api/user';
import { mapActions, mapGetters } from 'vuex';
export default {
  data () {
    return {
      starCount: [], // 定义数组存储星星的一些属性以及个数
      showMask: false,
      isTopNameLabel: false,
      isTopPsLabel: false,
      errTip: ''
    };
  },
  computed: {
    ...mapGetters(['token'])
  },
  onLoad() {
    console.log(this.token);
    if (this.token) {
      this.toPath();
    }
  },
  methods: {
    ...mapActions(['setUserInfo']),
    // 生成星星的方法
    setStarCount () {
      for (let i = 0; i < 20; i++) {
        // i < 星星个数
        let star = {}; //定义存储一个星星的对象
        let top = getRandomFn(100, -10); //定义星星的top值
        let left = getRandomFn(850, 10); //定义星星的left值
        let delay = parseInt(Math.random() * 10); //定义星星的动画延迟时间
        star.id = i;
        star.top = top;
        star.left = left;
        star.delay = delay;
        this.starCount.push(star);
      }
    },
    clickMaskFn () {
      this.showMask = !this.showMask;
    },
    // 获取焦点
    focusFn (type) {
      if (type === 'name') {
        this.isTopNameLabel = true;
      } else {
        this.isTopPsLabel = true;
      }
    },
    // 失去焦点
    blurFn (e, type) {
      if (e.target.value) return;
      if (type === 'name') {
        this.isTopNameLabel = false;
      } else {
        this.isTopPsLabel = false;
      }
    },
    // 登录
    formSubmit (event) {
      console.log(event);
      const formData = event.detail.value;
      if (!formData.userName.trim()) {
        uni.showToast({
          title: '请输入您的账号',
          icon: 'none',
          duration: 2000
        });
        return;
      }
      if (!formData.password.trim()) {
        uni.showToast({
          title: '请输入密码',
          icon: 'none',
          duration: 2000
        });
        return;
      }
      login(formData).then((res) => {
        console.log(res);
        if (res.code === 200) {
          this.setUserInfo(res.data);
          this.toPath();
        } else {
          this.errTip = res.message;
        }
      });
    },
    // 跳转
    toPath () {
      uni.reLaunch({
        url: '/pages/home/index'
      })
    }
  },
  // Vue实例的生命周期函数
  beforeMount () {
    this.setStarCount();
  }
};
</script>
<style lang="scss" scoped>
.box {
  overflow: hidden;
  position: relative;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  background: url('/static/img/login_bg.jpg') no-repeat 0% bottom;
  background-size: cover;
  &::before {
    position: absolute;
    width: 100%;
    height: 100%;
    background: inherit;
    content: '';
    transition: all 1s;
  }
  &.mask::before {
    filter: blur(5px);
  }
  .star {
    position: absolute;
    /* 使用伪元素制作尾巴,此处可以写流星头部的形状 */
    /* 我觉得头部不带形状才好看,所以不写 */
    width: 0;
    height: 0;
    opacity: 0;
    animation: star-fall 3s linear infinite;
    &::after {
      display: block;
      border: 0 solid #fff;
      border-width: 0 90px 3px 120px;
      border-color: transparent transparent transparent rgba(255, 255, 255, 0.5);
      box-shadow: 0 0 1px 0 rgba(255, 255, 255, 0.1);
      content: '';
      /* 变形 */
      transform: rotate(-30deg) translate3d(1px, 3px, 0);
      -webkit-transform-origin: 0% 100%;
      -moz-transform-origin: 0% 100%;
      transform-origin: 0% 100%;
    }
    /* 流星滑落动画 */
    @keyframes star-fall {
      0% {
        opacity: 0;
        transform: scale(0.5) translate3d(0, 0, 0);
      }
      50% {
        opacity: 1;
        transform: translate3d(-100px, 50px, 0);
      }
      100% {
        opacity: 0;
        transform: scale(1.2) translate3d(-200px, 100px, 0);
      }
    }
  }
  .form_box {
    overflow: hidden;
    position: absolute;
    left: 50%;
    top: 50%;
    border-radius: 20rpx;
    width: 0;
    height: 480rpx;
    background: rgba(0, 0, 0, 0.4);
    box-shadow: 0 9px 25px rgba(255, 255, 255, 0.3);
    opacity: 0;
    transform: translate(-50%, -50%);
    transition: all 0.3s;
    &.show_from {
      width: 600rpx;
      opacity: 1;
    }
    .form_wrap {
      position: absolute;
      left: 50%;
      box-sizing: border-box;
      padding: 30rpx 40rpx;
      width: 600rpx;
      height: 100%;
      transform: translateX(-50%);
      .title {
        margin-bottom: 22px;
        width: 140rpx;
        color: #fff;
      }
      .form-item {
        position: relative;
        margin-bottom: 18px;
        height: 32px;
        .label {
          position: absolute;
          left: 0;
          top: 50%;
          z-index: -1;
          width: 100%;
          font-size: 14px;
          color: #fff;
          color: #aaa;
          letter-spacing: 0.5px;
          transform: translateY(-50%);
          transition: 0.3s;
          &.top_label {
            top: 0;
            font-size: 12px;
            color: #fff;
            transform: translateY(-80%);
          }
        }
        input {
          padding: 4px 0;
          border-bottom: 1px solid #ccc;
          height: 24px;
          // color: #ff6d3a;
          color: #0cf;
          caret-color: #fff;
        }
        .input_border {
          position: absolute;
          left: 0;
          bottom: -1px;
          width: 0;
          height: 2px;
          background-color: #ff6d3a;
          transition: 0.3s;
          &.focus_border {
            width: 100%;
          }
        }
      }
      .error_tip {
        margin-top: -10px;
        margin-bottom: 8px;
        height: 20px;
        color: red;
      }
      .form-btn {
        button {
          border-radius: 15px;
          width: 90%;
          height: 30px;
          // background-color: #ff6d3a;
          background-image: linear-gradient(120deg, #f6d365 0%, #fda085 100%);
          line-height: 30px;
          // border-color: #ff6d3a;
          color: #fff;
        }
      }
    }
  }
}
</style>
